 <template>
  <div>
    <div class="filter-container">
      <el-input placeholder="姓名/电话" v-model="searchData" style="width: 200px;" class="filter-item"/>

      <el-button
        class="filter-item add-style"
        type="primary"
        icon="el-icon-search"
        @click="search"
      >搜索</el-button>
    </div>

    <tTable :columns="columns" :data="tableData">
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>
  </div>
</template>

<script>
import { getBuyCourseUser } from "api/user";
import { formatDateTime } from "src/util/time.js";
import { baseUrl } from "src/config/env.js";

import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

export default {
  data() {
    return {
      tableData: [],
      courseList: [], //用户已购买课程列表
      searchData: "",
      dialogVisible: false,

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "name", label: "姓名" }
        },
        {
          attr: { prop: "phone", label: "电话" }
        },
        {
          attr: { prop: "courseName", label: "课程名称" }
        },
        {
          attr: { prop: "startTime", label: "开始时间" }
        },
        {
          attr: { prop: "endTime", label: "到期时间" }
        }
      ],

      total: -1,
      pageSize: -1,
      totalPage: -1
    };
  },
  mounted() {
    this.getData(1);
  },
  components: { Pagination, tTable },
  methods: {
    search: function() {
      this.getData(1, this.searchData);
    },
    getData(pageNumber, searchName) {
      getBuyCourseUser(pageNumber, searchName).then(res => {
        this.total = res.totalElements;
        this.tableData = res.content.map(item => {
          item.startTime = formatDateTime(item.startTime);
          item.endTime = formatDateTime(item.endTime);
          return item;
        });
      });
    },
    handleChange: function(pageNumber) {
      if (this.searchData) {
        this.getData(pageNumber, this.searchData);
      } else {
        this.getData(pageNumber);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.filter-container {
  margin: 15px 0;
}

.course-des {
  width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
